import React, { useEffect, useState } from 'react';
import { Descriptions, Watermark, theme } from 'antd';
import { BackwardOutlined, HeartTwoTone } from '@ant-design/icons'
import moment from 'moment'
import axios from 'axios';


const Detail = (props) => {
    const { token } = theme.useToken();
    const [newsInfo, setNewsInfo] = useState({})

    useEffect(() => {
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            setNewsInfo({
                ...res.data,
                view: res.data.view + 1
            })
            return res.data
        }).then(res => {
            axios.patch(`/news/${props.match.params.id}`, { view: res.view + 1 })
        })
    }, [props.match.params.id])

    const items = [
        {
            key: '1',
            label: '创建者',
            children: newsInfo.author,
        },
        // {
        //     key: '2',
        //     label: '创建时间',
        //     children: moment(newsInfo.createTime).format("YYYY/MM/DD"),
        // },
        {
            key: '3',
            label: '发布时间',
            children: newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD") : '-',
        },
        {
            key: '4',
            label: '区域',
            children: newsInfo.region,
        },
        // {
        //     key: '5',
        //     label: '审核状态',
        //     contentStyle: { color: colorList[newsInfo.auditState] },
        //     children: auditList[newsInfo.auditState],
        // },
        // {
        //     key: '6',
        //     label: '发布状态',
        //     contentStyle: { color: colorList[newsInfo.publishState] },
        //     children: publishList[newsInfo.publishState],
        // },
        {
            key: '7',
            label: '访问数量',
            children: newsInfo.view,
        },
        {
            key: '8',
            label: '点赞数量',
            children: newsInfo.star,
        },
        {
            key: '9',
            label: '评论数量',
            children: 0,
        },
    ];

    const handleStar = () => {
        axios.patch(`/news/${props.match.params.id}`, { star: newsInfo.star + 1 }).then(res => {
            setNewsInfo({
                ...newsInfo,
                star: newsInfo.star + 1
            })
        })
    }

    const contentStyle = {
        // lineHeight: '260px',
        textAlign: 'left',
        color: token.colorTextTertiary,
        backgroundColor: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        border: `1px dashed ${token.colorBorder}`,
        marginTop: 10,
        // height: 500
    };

    return <div style={{ margin: "10px 30px" }}>
        {newsInfo && <>
            {/* 标题-副标题 */}
            <div>
                <BackwardOutlined style={{ fontSize: '16px', color: '#08c', height: "30px" }} onClick={() => { window.history.back() }} />
                <span style={{ paddingLeft: "5px", fontSize: "24px", fontWeight: "600" }}>{newsInfo.title}</span>
                <span style={{ paddingLeft: "10px", fontSize: "12px", color: "gray" }} >{newsInfo.category?.title}</span>
                <HeartTwoTone twoToneColor="#eb2f96" onClick={() => handleStar()}></HeartTwoTone>
            </div>

            <Watermark content="小O爱学习">
                <Descriptions items={items} />
                <div style={contentStyle} dangerouslySetInnerHTML={{ __html: newsInfo.content }} />
            </Watermark>
        </>}
    </div>
}
export default Detail;